<template>
  <p>
    <a-space>
      <a-button type="primary" @click="handleQuery()">刷新</a-button>
      <a-button type="primary" @click="onAdd">新增</a-button>
    </a-space>

  </p>

<!--  列表表单，dataSource数据数组，columns列对应关系，pagination分页信息，@change翻页事件，-->
  <a-table :dataSource="passengers"
           :columns="columns"
           :pagination="pagination"
           @change="handleTableChange"
           :loading="loading">
    <template #bodyCell="{column, record}">
      <template v-if="column.dataIndex === 'operation'">
        <a-space>
          <a-popconfirm title="是否删除？" @confirm="onDelete(record)" ok-text="确认" cancel-text="取消">
            <a style="color: red">删除</a>
          </a-popconfirm>

          <a @click="onEdit(record)">编辑</a>
        </a-space>
      </template>
      <template v-else-if="column.dataIndex === 'type'">
        <span v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code">
          <span v-if="item.code === record.type">
            {{item.desc}}
          </span>
        </span>
      </template>
    </template>
  </a-table>


<!--  乘车人新增页面-->
  <a-modal v-model:visible="visible" title="乘车人" @ok="handleOk"
  ok-text="确认" cancel-text="取消">
    <a-form :model="passenger" :label-col="{span: 4}" :wrapper-col="{ span: 20 }">
      <a-form-item label="姓名">
        <a-input v-model:value="passenger.name" />
      </a-form-item>
      <a-form-item label="身份证">
        <a-input v-model:value="passenger.idCard" />
      </a-form-item>
      <a-form-item label="类型">
        <a-select v-model:value="passenger.type">
<!--          <a-select-option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">-->
<!--            {{item.desc}}-->
<!--          </a-select-option>-->
<!--          <a-select-option value="1">承认</a-select-option>-->
<!--          <a-select-option value="2">儿童</a-select-option>-->
<!--          <a-select-option value="3">学生</a-select-option>-->
          <a-select option v-for="item in PASSENGER_TYPE_ARRAY" :key="item.code" :value="item.code">{{item.desc}}</a-select>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>

</template>
<script>
import {defineComponent, onMounted, ref} from "vue";
import {notification} from "ant-design-vue";
import axios from "axios";

export default defineComponent({
  setup(){
    const visible = ref(false);

    const PASSENGER_TYPE_ARRAY = window.PASSENGER_TYPE_ARRAY;

    //定义列表数组
    const passengers = ref([]);

    //定义列对应显示关系
      const  columns= [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '身份证',
        dataIndex: 'idCard',
        key: 'idCard',
      },
      {
        title: '类型',
        dataIndex: 'type',
        key: 'type',
      },{
        title: '操作',
          dataIndex: 'operation',
        },
    ];

    //定义分页信息
    const pagination = ref({
      total : 0,
      current : 1,
      pageSize : 2
    })

    let loading = ref(false);

    //获取数据方法
    const handleQuery = (param) =>{
      if (!param){
        param = {
          page: 1,
          size: pagination.value.pageSize
        };
      }
      loading.value = true;
      axios.get("/member/passenger/query-list",{
        params:{
          page : param.page,
          size : param.size
        }
      }).then((res) =>{
        loading.value = false;
        let data = res.data;
        if(data.success){
          passengers.value = data.content.list;
          pagination.value.current = param.page;
          pagination.value.total = data.content.total;
        }else{
          notification.error({description : data.message});
        }
      })
    };

    //删除
    const onDelete = (record) =>{
      axios.delete("/member/passenger/delete/" + record.id).then((res) =>{
        let data = res.data;
        if(data.success){
          notification.success({description: "删除成功！！"});
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize,
          });
        }else{
          notification.error({description: data.message});
        }
      });
    };
    //属性赋值
    const passenger = ref({
      id: undefined,
      memberId: undefined,
      name: undefined,
      idcard: undefined,
      type: undefined,
      createTimd: undefined
    });

    //小窗口是否显示
    const onAdd=() =>{
      passenger.value = {};
     visible.value = true;
    };

    //小窗口是否显示
    const onEdit=(record) =>{
      passenger.value = window.Tool.copy(record);
      visible.value = true;
    };

    //确认新增
    const handleOk = () =>{
      axios.post("/member/passenger/save",passenger.value).then(res=>{
        let data = res.data;
        if(data.success){
          notification.success({description : "保存成功"});
          visible.value = false;
          handleQuery({
            page: pagination.value.current,
            size: pagination.value.pageSize
          })
        }else{
          notification.error({description : "操作失败"});
        }
      });
    };

    //翻页
    const handleTableChange = (pagination) =>{
      handleQuery({
        page: pagination.current,
        size: pagination.pageSize
      });
    };

    //钩子函数
    onMounted(()=>{
      handleQuery({
        page:1,
        size:pagination.value.pageSize
      });
    });


    return{
      PASSENGER_TYPE_ARRAY,
      visible,
      onAdd,
      handleOk,
      passenger,
      passengers,
      columns,
      pagination,
      handleTableChange,
      handleQuery,
      loading,
      onEdit,
      onDelete
    };
  }
});
</script>
<style>

</style>